<template>
    <div>
        <el-table
                ref="filterTable"
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    sortable
                    width="180"
                    column-key="date"
                    :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
                    :filter-method="filterHandler"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="账号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="备注"
                    width="300"
                    :formatter="formatter">
            </el-table-column>
            <el-table-column
                    prop="tag"
                    label="标签"
                    width="150"
                    :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.tag === '家' ? 'primary' : 'success'"
                            disable-transitions>{{scope.row.tag}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                        通过
                    </el-button>
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                        拒绝
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "ele1",
        data() {
            return {
                tableData: [{
                    date: '2022-05-02',
                    name: '15236488569',
                    address: '软本18xx xxx',
                    tag: '申请成为注册用户'
                }, {
                    date: '2022-05-04',
                    name: '12547856325',
                    address: '网本18xx xxx xxxxxxxxx',
                    tag: '申请成为注册用户'
                }]
            }
        },
        methods: {
            resetDateFilter() {
                this.$refs.filterTable.clearFilter('date');
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            }
        }
    }
</script>

<style scoped>
    a {
        color: blue;
        cursor: pointer;     /* 鼠标样式*/
    }
    a:link { color: #06F; text-decoration: none; }/* 未访问的链接 */
    a:visited { color: #999; text-decoration: line-through; } /* 已访问的链接 */
    a:hover { color: #45ffc0; text-decoration: underline; }/* 鼠标移动到链接上 */
    a:active { color: #F0F; } /* 选定的链接 */

</style>
